{include header}
<div class="wrapper">
    {include header_menu}

    {include left_menu}
    <div class="main-container">
        <div class="padding-md">
            <h2 class="header-text no-margin">
				插件
			</h2>
            <div class="gallery-filter m-top-md" style="margin:10px 0">
				<ul class="clearfix">
					<li><a href="{php echo WWW . URL('admin','code');}">我的</a></li>
					<li class="active"><a href="{php echo WWW . URL('admin','codeol');}">线上</a></li>
                    
				</ul>
			</div>

            <div id="list" class="row">

            </div>
            <script>
            var json = ({$data});
            function get_jsonp(){

                var html= '';
                $.getJSON("http://127.0.0.1/index/test?jsoncallback=?",function(e){

                    for(o in e){

                        var tmp = '<a onclick="mod(\\''+e[o].title+'\\',\\''+e[o].image+'\\',\\''+e[o].mess+'\\',\\''+e[o].name+'\\',\\''+e[o].user+'\\')" class="btn btn-xs btn-success"  data-toggle="modal" data-target="#normalModal">下载</a>';
                        for(oo in json){
                            if(json[oo] == e[o].name){
                                tmp = '<a class="btn btn-xs btn-danger" disabled>已下载</a>';
                            }
                        }
                        html = '<div class="col-sm-4"><div class="panel"><div class="panel-body"><a href="#" class="pull-left m-right-sm"><i class="fa fa-';
                        html+=e[o].icon;
                        html+=' fa-3x"></i></a><div class=" m-left-sm"><strong class="font-14 block">';
                        html+=e[o].title;
                        html+='</strong><small class="text-muted">作者: ';
                        html+=e[o].user;
                        html+='</small><div class="seperator"></div><p class="m-bottom-none">';
                        html+=e[o].mess;
                        html+='</div>'+tmp+'</div></div></div>';
                        $("#list").append(html);

                    }



                });
            }
            window.onload = function(){
                get_jsonp();
            }
            function mod(title,image,mess,name,user){
                var arr = image.split(',');
                var html = '';
                $("#tmpimg").html('<div id="image" class="owl-carousel no-controls"></div>');
                for(o in arr){
                    html+='<div class="item"><img src="'+arr[o]+'" alt=""></div>';





                }
                $("#ms").text(mess)
                $("#image").html(html);
                $(".modal-p1").text(title);
                $("#name").val(name);
                $("#suser").text("作者: "+user);

                $('.owl-carousel').owlCarousel({
    				    items:1,
    				    loop:true,
    				    autoplay:true,
    					autoplayTimeout:2000,
    					autoplayHoverPause:true,
    				    stagePadding:0,
    				    smartSpeed:450,
    				    dots: false
    				});

            }
            </script>


            <form method="post">
                <input type="hidden" name="name" value="" id="name">
            <div class="modal fade in" id="normalModal" aria-hidden="false">
			  	<div class="modal-dialog">
			    	<div class="modal-content">
			      		<div class="modal-header">
			        		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			        		<h4 class="modal-title" id="zti">下载插件 - <span class="modal-p1"></span></h4>
			      		</div>
			      		<div class="modal-body" id="md1">
                            <div class="panel">
                            <div class="panel-body">
                            	<a href="#" class="pull-left m-right-sm"><i class="fa fa-qq fa-3x"></i></a>
                            	<div class=" m-left-sm">
                            		<strong class="font-14 block modal-p1" ></strong><small class="text-muted"  id="suser"></small>
                            		<div class="seperator">
                            		</div>
                            		<p class="m-bottom-none" id="ms">
                            			QQ登录描述
                            		</p>
                            	</div>
                            </div>
                            </div>


                            <div id="tmpimg">
                            <div id="image" class="owl-carousel no-controls">

                            </div>
                            </div>




			      		</div>
			      		<div class="modal-footer">
			        		<button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
			        		<button type="submit" class="btn btn-success">确定下载</button>
			      		</div>
			    	</div>
			  	</div>
			</div>
            </form>


        </div>
    </div><!-- ENd box  -->

</div>
</div>

<style>
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block;padding: 5px;    background: #DDD;}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel .owl-rtl{direction:rtl}.owl-carousel .owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}
</style>
{include footer}
<script src="{#WWW}public/admin/js/owl.carousel.min.js"></script>
